﻿<template>
    <el-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1300"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="采购订单编号:"
                    >{{ entityObj.purchaseOrderCode }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="要货单位:">{{ entityObj.storeName }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="申请人:"
                    >{{entityObj.applyName? entityObj.applyName:"无" }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="申请时间:"
                    >{{ entityObj.applyDate? entityObj.applyDate:"无" }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="期望到货时间:"
                    >{{ entityObj.expectedDate?entityObj.expectedDate:"无" }}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="发货状态:">{{ entityObj.sendStatusDesc }}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-form-item label="发货时间" label-width="120px">
                    <el-date-picker
                        style="width: 300px"
                        v-model="queryList.sendDate"
                        type="datetimerange"
                        value-format="YYYY-MM-DD HH:mm:ss"
                        format="YYYY-MM-DD HH:mm:ss"
                        range-separator="-"
                        unlink-panels="true"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        :default-time="defaultTime"
                    />
                </el-form-item>
                <el-form-item label="发货人" label-width="120px">
                    <el-input
                        placeholder="---请输入发货人---"
                        v-model="queryList.sendName"
                        style="width: 160px"
                    />
                </el-form-item>
                <el-form-item label="物料名称" label-width="120px">
                    <el-input
                        placeholder="---请输入物料名称---"
                        v-model="queryList.materialName"
                        style="width: 160px"
                    />
                </el-form-item>
                <el-form-item label-width="120px">
                    <el-button
                        :icon="Search"
                         
                        type="primary"
                        @click="handleSearch"
                    >查询</el-button>
                    <el-button :icon="Search" type="info" plain @click="resetSearch">重置</el-button>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="出库发货:">
                        <el-table
                            :data="entityObj.purchaseSendOrderItems"
                            border
                            style="width: 100%"
                            :row-class-name="setRowClass"
                        >
                            <el-table-column label="物料编码" width="110" prop="materialCode"></el-table-column>
                            <el-table-column label="物料名称" width="140" prop="materialName">
                                <template #default="scope">
                                    <div
                                        v-if="scope.row.materialImages && scope.row.materialImages.length > 0"
                                        style="color: #318cf2;"
                                        @click="handlePreview(scope.row)"
                                    >{{scope.row.materialName}}</div>
                                    <div v-else>{{scope.row.materialName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="规格" width="100" prop="materialSpecs"></el-table-column>
                            <el-table-column label="物料类别" width="140" prop="materialTypeName"></el-table-column>
                            <el-table-column label="单位" width="85" prop="unitName"></el-table-column>
                            <el-table-column label="本次发货" width="120" prop="qty">
                                <template #default="scope">
                                <el-input-number
                                        :disabled="!canUseButton()"
                                        v-model="scope.row.qty"
                                        style="width: 100%"
                                        :precision="0"
                                        :max="scope.row.qty"
                                        :min="0"
                                        :step="1"
                                        controls-position="right"
                                    ></el-input-number>
                                </template>
                            </el-table-column>
                            <el-table-column label="发货编号" width="150" prop="sendOrderCode"></el-table-column>
                            <el-table-column label="发货人" width="110" prop="sendName"></el-table-column>
                            <el-table-column label="发货时间" width="170" prop="sendDate">
                            </el-table-column>
                            <el-table-column label="物流详情" width="200" prop="logistics">
                                <template
                                    #default="scope"
                                >{{scope.row.logisticNsame}}{{scope.row.logisticsCode&&scope.row.logisticsCode.length >0?'('+scope.row.logisticsCode+')':"无"}}</template>
                            </el-table-column>
                            <el-table-column label="出库类型" width="100" prop="warehouseTypeDesc"></el-table-column>
                            <el-table-column label="出库仓库" width="120" prop="warehouseName"></el-table-column>
                            <el-table-column label="出库时间" width="110" prop="outDate">
                                <template #default="scope">{{scope.row.outDate?.slice(0,10)}}</template>
                            </el-table-column>
                            <el-table-column label="发货照片" width="200">
                                <template #default="scope">
                                        <el-image
                                            v-for="(item,index) in scope.row.sendFiles"
                                            :key="index"
                                            style="width: 50px; height: 40px;margin: 4px;"
                                            :src="item"
                                            :zoom-rate="1.2"
                                            :max-scale="7"
                                            :min-scale="0.2"
                                            :preview-src-list="[item]"
                                            preview-teleported="true"
                                            :z-index="9999"
                                            fit="cover"
                                        />
                                        
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" width="100" >
                                <template #default="scope">
                                    <el-button    v-if="canUseButton()" type="primary" size="small" @click="opUploadFile(scope.row)">上传</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button
                v-if="canUseButton()"
                type="primary"
                :loading="isSaveing"
                @click="submit()"
            >保存</el-button>
        </template>
    </el-dialog>

	<!-- 预览组件 -->
	<el-image-viewer v-if="showImage" @close="closeViewer" :hide-on-click-modal="true" :url-list="srcList" />
    <upload-files-dialog
            v-if="dialogUploadFiles"
            ref="uploadFilesDialog"
            @setSendFiles="setSendFiles"
            @success="handleSaveSuccess"
            @closed="dialogUploadFiles = false"
        ></upload-files-dialog>
</template>
<script>
import tool from "@/utils/tool";
import uploadFilesDialog from "./uploadFiles";
export default {
    emits: ["success", "closed"],
    components: {
        uploadFilesDialog
    },
    data() {
        return {
			//预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
            mode: "Send",
            titleMap: {
                Send: "物料发货明细",
            },
            entityObj: {},
            materialState: false,
            queryList: {},
            visible: false,
            isSaveing: false,
            needSaveFlag: false,
            dialogUploadFiles:false,
            //验证规则
            rules: {
                purchaseProtocolName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                purchaseUnityName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                supplier: [
                    {
                        required: true,
                        type: "object",
                        message: "请填写",
                    },
                ],
                protocolDate: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                    },
                ],
                crName: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                crDate: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                materialSpecs: [
                    {
                        required: true,
                        type: "string",
                        message: "请填写",
                    },
                ],
                purchaseProtocolItems: [
                    {
                        required: true,
                        type: "array",
                        message: "请填写",
                        trigger: "change",
                    },
                ],
            },
            props: {
                label: "supplierName",
                value: "supplierId",
            },
            materialProps: {
                label: "materialCode",
                value: "materialId",
                items: "materialItems",
            },
            materialTypeTree: [],
            optionsLogistics: [],
            itemsData: [],
            defaultTime:[
                new Date(2000, 1, 1, 0, 0, 0),
                new Date(2000, 2, 1, 23, 59, 59),
            ],
            currentRow:{}
        };
    },
    computed: {},
    methods: {
        //显示=
        open(mode = "Send") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
		//图片预览
        handlePreview(row) {
            console.log("row", row.materialImages);
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image
        },
        closeViewer() {
            this.showImage = false;
        },
        //表单注入数据
        async setData(data) {
            try {
                var returnValue = await this.$API.auth.GetProcessApi.get(
                    "purchase-order/send-items/" + data,
                    {}
                );
                if (returnValue.status == 200) {
                    this.entityObj = {
                        ...returnValue.response,
                    };
                    this.itemsData =
                        returnValue.response.purchaseSendOrderItems;
                } else {
                    this.$message.error("操作失败:" + returnValue.msg);
                }
            } catch (error) {
                this.loading = false;
                return false;
            }
        },
        handleSearch() {
            var items = this.itemsData;
            if (this.queryList.sendDate) {
                items = items.filter((item) => {
                    return (
                        item.sendDate >= this.queryList.sendDate[0] &&
                        item.sendDate <= this.queryList.sendDate[1]
                    );
                });
            }

            if (this.queryList.sendName) {
                items = items.filter((item) => {
                    return item.sendName.includes(this.queryList.sendName);
                });
            }
            if (this.queryList.materialName) {
                items = items.filter((item) => {
                    return item.materialName.includes(
                        this.queryList.materialName
                    );
                });
            }
            this.entityObj.purchaseSendOrderItems = items;
        },
        resetSearch() {
            this.queryList = {};
        },
        setRowClass({ row }) {
            //终止
            if (row.status == 0) {
                return "selected-row-color-grey";
            }
            return "";
        },

        //保存发货数量
        submit()
        {
            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "purchase-order/updateSendQty",
                                {
                                    ...this.entityObj
                                }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });
        },
         //上传照片
         opUploadFile(row){
            this.currentRow=row;
            this.dialogUploadFiles=true;
            var data={
                sendFiles:row.sendFiles,
            }
            this.$nextTick(() => {
                this.$refs.uploadFilesDialog.open("Show").setData(data);
            });
        },

        //设置上传照片
        setSendFiles(sendFiles){
            this.currentRow.sendFiles=sendFiles?sendFiles.split(","):[];
            console.log("保存发货图片",this.currentRow)

            this.$refs.dialogForm.validate(async (valid) => {
                if (valid) {
                    try {
                        var returnValue =
                            await this.$API.auth.PostProcessApi.post(
                                "purchase-order/updateSendFiles",
                                {
                                    ...this.currentRow
                                }
                            );
                        if (returnValue.status == 200) {
                            this.$message.success("操作成功");
                            this.$emit("fatherMethod");
                            this.isSaveing = false;
                            this.visible = false;
                        } else {
                            this.$message.error("操作失败:" + returnValue.msg);
                            this.isSaveing = false;
                        }
                    } catch (error) {
                        this.loading = false;
                        this.isSaveing = false;
                        return false;
                    }
                }
            });

        },
        //可使用按钮
        canUseButton()
        {
            if(this.entityObj.purchaseOrderStatus!=5 && this.entityObj.purchaseOrderStatus!=9)
            {
                return true;
            }
            return false;
        }
    },
    async mounted() {},
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 8px !important;
}
.el-table .selected-row-color-grey {
    color: #000000 !important;
    text-decoration: line-through; /* 删除线 */
}
</style>
